import React, {Component} from 'react';
import { withRouter } from 'react-router-dom';

@withRouter
class Main extends Component {
    toDetail=(id)=>{
        this.props.history.push(`/detail/${id}`);
    };
    render() {
        return (
            <ul>
                {
                    this.props.List.map(item=>{
                        return(
                            <li className="list-item"
                                key={item.id}
                                onClick={this.toDetail.bind(this,item.id)}
                            >
                                <div className="img">
                                    <img src={item.img} alt="{item.name}"/>
                                </div>
                                <div>
                                    <h3>{item.name}</h3>
                                </div>
                                <div>
                                    <span>￥{item.price}</span>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>


        );
    }
}

export default Main;